import React, { Component } from 'react';
import { Button, Modal, Form, Drawer, PageHeader, Divider, Badge } from 'antd';
import '@/assets/css/settings';
import { BasicLayout, BasicLayoutSearch } from '../../../components/BasicLayout';
import { BasicPagination, isInvalidObject, compareNum, TableCustomize, openSuccessModal, openModalMessage, compareString } from '../../../components/TableCustomize'
import { withPermission } from '../../../components/withpermission';
import moment from 'moment';

import * as echarts from "echarts";

import * as CheckManagementService from '../../../axios/CheckManagement'
import { withRouter } from 'react-router';
const CreateButton = withPermission(Button, 'create')
const { confirm } = Modal

class productionLayoutList_details extends Component {

	componentDidMount() {
		this.initCharts();
	}

	initCharts = () => {
		let myChart = echarts.init(document.getElementById("myChart"));
		let option = {
			// title: {
			// 	text: "生产报工统计",
			// 	subtext: '工序明细'
			// },
			color: ["#5B8FF9", "#5AD8A6", "#F6BD16", "#E8684A", "#6DC8EC", "#9270CA", "#FF9D4D", "#269A99", "#FF99C3"],
			tooltip: {
				trigger: 'axis',
				axisPointer: {            // 坐标轴指示器，坐标轴触发有效
					type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				},
			},
			legend: {
				data: ['工序1', '工序2', '工序3', '工序4', '工序5'],
				x: 20,
				y: 10
			},
			toolbox: {
				show: false,
				feature: {
					mark: { show: true },
					dataView: { show: true, readOnly: false },
					magicType: { show: true, type: ['line', 'bar', 'stack', 'tiled'] },
					restore: { show: true },
					saveAsImage: { show: true }
				}
			},
			calculable: true,
			xAxis: [
				{
					type: 'value'
				}
			],
			yAxis: [
				{
					type: 'category',
					data: ['C12345/01', 'C12345/02', 'C12345/03', 'C12345/04', 'C12345/05']
				}
			],
			series: [
				{
					name: '工序1',
					type: 'bar',
					stack: '工序',
					itemStyle: { normal: { label: { show: true, position: 'inside' } } },
					tooltip: {
						trigger: 'item',
						backgroundColor: '#fff',
						textStyle: { color: '#000' },
						position: function (p) { // 位置回调
							return [p[0] + 10, p[1] - 10];
						},
						// formatter: "<p>柱架装配</p>装配班组：{a}<br/>装配开始：{b}<br/>装配报工：{c}"
						formatter: function (params) {
							console.log(params)
							var res = `<div style="padding: 5px; font-weight: bold;"><p>柱架装配</p>装配班组：${params.name}<br/>装配开始：${params.seriesName}<br/>装配报工：${params.value}</div>`;
							return res
						}
					},
					data: [320, 302, 390, 330, 320]
				},
				{
					name: '工序2',
					type: 'bar',
					stack: '工序',
					itemStyle: { normal: { label: { show: true, position: 'inside' } } },
					data: [120, 101, 134, 90, 230]
				},
				{
					name: '工序3',
					type: 'bar',
					stack: '工序',
					itemStyle: { normal: { label: { show: true, position: 'inside' } } },
					data: [182, 191, 234, 290, 330]
				},
				{
					name: '工序4',
					type: 'bar',
					stack: '工序',
					itemStyle: { normal: { label: { show: true, position: 'inside' } } },
					data: [150, 212, 190, 330, 410]
				},
				{
					name: '工序5',
					type: 'bar',
					stack: '工序',
					itemStyle: { normal: { label: { show: true, position: 'inside' } } },
					data: [420, 201, 334, 290, 0]
				}
			]
		};

		myChart.setOption(option);
		window.addEventListener("resize", function () {
			myChart.resize();
		});
	};

	render() {
		const { dataSource, searchItem } = this.props
		console.log(dataSource)
		console.log(searchItem)

		return (
			<div>
				<PageHeader
					style={{ padding: '4px 24px' }}
					title={`生产报工统计`}
					extra={[<Button>批号日期范围：<span style={{ fontWeight: 'bold' }}>{moment(searchItem.firstDeliveryDateMin).format('YYYY-MM-DD') + ' ~ ' + moment(searchItem.firstDeliveryDateMax).format('YYYY-MM-DD')}</span></Button>]}>
					工序明细
				</PageHeader>
				<div id='myChart' style={{ width: '100%', height: 500 }}></div>
			</div>
		);
	}
}
export default Form.create()(withRouter(productionLayoutList_details));